<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
  <title>指数面板</title>
  <script src="./js/echarts-v3.js"></script>
  <script src="./js/echarts-liquidfill.js"></script>
  <script src="./js/china.js"></script>
  <script src='./js/MachineLocation.js'></script>
<!--  <script src="./js/echarts.min.js"></script>-->
</head>


<body>
  <div style="width: 1720px; height: 1024px; margin: 0;">

     <!-- 左侧图标区 -->
    <div style="width: 50%; height: 720px; float: left;">

      <div style="display: block; width: 800px; height: 360px">
        <div id="index" style="width: 400px;height: 360px;float: left"></div>
        <div id="index_history" style="width: 400px;height: 360px;float: right;"></div>        
      </div>

      <div style="display: block; width: 800px; height: 360px">
        <div id="power" style="width: 400px;height: 360px;float: left;"></div>
        <div id="power_history" style="width: 400px;height: 360px;float: right;"></div>        
      </div>

<!--       <div style="display: block; width: 800px; height: 360px">
        <div id="type_pie" style="width: 400px; height: 360px; float: left;"></div>
      </div> -->

    </div>

    <!-- 右上侧地区区 -->
    <div id="map" style="float: right; width: 50%; height: 720px; margin: 0">
        
    </div>

    <!-- 底部 -->
    <div style="width: 100%; height: 360px; margin: 0">
      <div id ="type_pie" style="width: 20%; height: 360px; float: left; "></div>

      <div style="width: 80%; height: 360px; float: right;">
        <div id ="on_num_hy" style="width: 25%; height: 360px; float: left;"> </div>
        <div id ="on_num_csj" style="width: 25%; height: 360px; float: left;"> </div>
        <div id ="on_num_zsj" style="width: 25%; height: 360px; float: left;"> </div>
        <div id ="on_num_other" style="width: 25%; height: 360px; float: left;"> </div> 
      </div>

    </div>
  </div>

  <script type="text/javascript">
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('index_history'));

    //制定图表的配置项和数据
    var option = {
      title: {
        textStyle:{
          fontSize:18,
          fontFamily:'Microsoft YaHei'
        },

        text: '历史活跃度',

        x:'center'
      },

      itemStyle:{
          color:'#4b698d',
      },


      barWidth:24,

      tooltip: {},
/*      legend: {
        data: ['数量']
      },*/
      xAxis: [
        {
          data: ["3.8", "3.9", "3.10", "3.11", "3.12", "3.13"]
        }
      ],
      yAxis: {
        show:true,
        axisTick:false,
      },
      series: [
        {
          name: '日期：数量',
          type: 'line',
          label:{
            show:true,        
          },
          data: [0.58, 0.61, 0.57, 0.64, 0.56, 0.60]
        },
        // {
        //   name:'预估能耗',
        //   type:'line',
        //   data:[158, 161, 157, 164, 156, 160]
        // }
      ]
    };
    //使用刚制定的配置项和数据显示图标
    myChart.setOption(option);
</script>

<script type="text/javascript">
  echarts.init(document.getElementById('type_pie')).setOption({
    title : {
      text: '机床类型',
      x:'center'
    },

    center:['10%', '10%'],
    tooltip : {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    calculable : true,
    series : [
      {
        name:'机床结构',
        type:'pie',
        radius : '55%',
        center: ['50%', '50%'],

        data:[
          {
            name:'磨床', 
            value:335, 
            itemStyle:{
              color:'rgb(194, 53, 49)',
            }
          },
          {
            name:'钻床',
            value:310, 
            itemStyle:{
              color:'rgb(47, 69, 84)'
            }
          },
          {
            name:'铣床',
            value:234, 
            itemStyle:{
              color:'#63869e'
            }
          },
          {
            name:'加工中心',
            value:135,
            itemStyle:{
              color:'#61a0a8'
            }
          },
          {
            name:'精雕机床',
            value:154, 
            itemStyle:{
              color:'rgb(145, 199, 175)'
            }
          }
        ]
      }
    ]
  });
  myChart.setOption(option);
</script>

<script type="text/javascript">
  var mychart = echarts.init(document.getElementById('index'));
  var option = {
    title:{
      text:'当前活跃度',
      x:'center',
    },
    tooltip : {
      trigger: 'null',
      //formatter: "{a} <br/>{b} : {c} ({d}%)"
      //formatter:"{d}%",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },

    series:[
      {
        type:'liquidFill',
        data:[0.6],

        outline:{
          show:false
        },

        label:{
          color:'#4b698d',
          baseline:'bottom'
        },

        amplitude:4,
        color:['#4b698d']
      }
    ],
  };
  mychart.setOption(option);
</script>


<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('power'));

   var option = {
     title:{
       text:'预估能耗（万千瓦）',
       x:'center'
     },
    legend: {},
    tooltip: {},

    radar:{
      radius:'50%',

      indicator:[
        {
          name:'磨床',
          max:100
        },
        {
          name:'钻床',
          max:100
        },        
        {
          name:'铣床',
          max:100
        }, 
        {
          name:'加工中心',
          max:100
        }, 
        {
          name:'精雕机床',
          max:100
        },              
      ],

      shape:'circle',

      splitNumber:5,

      name:{
        textStyle:{
          color: 'rgb(0, 104, 139'
        }
      },

      splitLine:{
        lineStyle:{
          width:2,
          color:[
            'rgba(176, 226, 255, 0.3)', 'rgba(176, 226, 255, 0.5)'
          ].reverse()
        }
      },

      splitArea:{
        show:false
      },

      axisLine:{
        lineStyle:{
          color: 'rgba(176, 226, 255, 0.5)'
        }
      }
    },

    series: [
      {
        type:'radar',
        name:'预估能耗(万千瓦)',

        itemStyle:{
          normal:{
            color:'#e79b37',
          }
        },

        lineStyle:{
          width:2,
          color:'#c23531',
          opacity:1
        },


        areaStyle:{
          normal:{
            color:'#c23531',
            opacity:0.2
          }
        },

        data:[
          {
            value:[70, 62, 55, 60, 46],
            label:{
              show:true,
              color:'#000',
              fontSize:18,
            }            
          },
        ]
      }
    ]
  };
   myChart.setOption(option);
</script>

  <script type="text/javascript">
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('power_history'));

    //制定图表的配置项和数据
    var option = {
      title: {
        textStyle:{
          fontSize:18,
          fontFamily:'Microsoft YaHei'
        },

        text: '历史能耗统计',

        x:'center'
      },

      itemStyle:{
          color:'#e79b37',
          opacity:0.8
      },


      barWidth:24,

      xAxis: [
        {
          data: ["3.8", "3.9", "3.10", "3.11", "3.12", "3.13"]
        }
      ],
      yAxis: {
        show:true,
        axisTick:false,
        min:270,
      },
      series: [
        {
          name: '日期：数量',
          type: 'bar',
          label:{
            show:true,  
            position:'top'      
          },
          data: [279.5, 280.3 , 280.6, 281.1, 281.3, 281.5]
        },
      ]
    };
    //使用刚制定的配置项和数据显示图标
    myChart.setOption(option);
</script>


<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('map'), 'dark');

  // 指定图表的配置项和数据

  var  seriesData  = getMachineLocationData();

  var option = {
    backgroundColor: '#b1b1b1',
    // backgroundColor:'rgba(0,0,0,0',
    title: {
      text: '全国机床分布',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      formatter:function(obj){
        var value  = obj.value;
        return '<div style="border-bottom:1px solid rgba9255,255,255,.3);font-size:10px;">'
          +'活跃指数:'+value[2];
      }
    },

    geo:{
      map:'china',
      zoom:1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      itemStyle: {
        normal: {
          areaColor: '#323c48',
          borderColor: '#111'
        },
        emphasis: {
          areaColor: '#FFFFE0'
        }
      }
    },

    series:{
      type:'scatter',
      coordinateSystem:'geo',
      data:seriesData,

      symbolSize: 8,
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: false
        }
      },
      itemStyle: {
        emphasis: {
          borderColor: '#fff',
          borderWidth: 1
        }
      }
    },
    visualMap:[
      {
        dimension:3,
        categories:['磨床','钻床','铣床','加工中心','精雕机床'],
        color: ['#d94e5d','#eac736','#50a3ba','#2BD5D5','#4D76B3'],
        textStyle: {
          color: '#fff'
        },
        //  categories:['磨床','铣床','镗床','精雕机床','加工中心'],
        itemSymbol:'circle'
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>


<script type="text/javascript">
  var myChart  = echarts.init(document.getElementById('on_num_hy'));
  var option  = {
    title:{
      text:'黄岩开动率',
      x:'center',
      bottom:'10%'      
    },


    series:[
      {
        name:'开动率',
        type:'gauge',
        splitNumber:1,

        axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
                color:[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']],
                width: 10,
                shadowColor : '#fff', //默认透明
                shadowBlur: 20
            }
        },

        axisLabel:{
          show:false
        },

        axisTick:{
          show:false
        },

        splitLine:{
          show:false
        },

        pointer:{
          width:4,
          length:'100%'
        },


        detail:{formatter:'{value}%'},
        data:[
          {
            value:68,
            name:'开动率'
          }
        ]
      }
    ]
  };

  myChart.setOption(option);
</script>


<script type="text/javascript">
  var myChart  = echarts.init(document.getElementById('on_num_csj'));
  var option  = {

    title:{
      text:'长三角开动率',
      x:'center',
      bottom: '10%' 
    },

    series:[
      {
        name:'开动率',
        type:'gauge',
        splitNumber:1,

        axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
                color:[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']],
                width: 10,
                shadowColor : '#fff', //默认透明
                shadowBlur: 20
            }
        },

        axisLabel:{
          show:false
        },

        axisTick:{
          show:false
        },

        splitLine:{
          show:false
        },

        pointer:{
          width:4,
          length:'100%'
        },


        detail:{formatter:'{value}%'},
        data:[
          {
            value:60,
            name:'开动率'
          }
        ]
      }
    ]
  };
  myChart.setOption(option);
</script>


<script type="text/javascript">
  var myChart  = echarts.init(document.getElementById('on_num_zsj'));
  var option  = {

    title:{
      text:'珠三角开动率',
      x:'center',
      bottom:'10%'
    },

    series:[
      {
        name:'开动率',
        type:'gauge',
        splitNumber:1,

        axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
                color:[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']],
                width: 10,
                shadowColor : '#fff', //默认透明
                shadowBlur: 20
            }
        },

        axisLabel:{
          show:false
        },

        axisTick:{
          show:false
        },

        splitLine:{
          show:false
        },

        pointer:{
          width:4,
          length:'100%'
        },


        detail:{formatter:'{value}%'},
        data:[
          {
            value:63,
            name:'开动率'
          }
        ]
      }
    ]
  };
  myChart.setOption(option);
</script>



<script type="text/javascript">
  var myChart  = echarts.init(document.getElementById('on_num_other'));
  var option  = {
    title:{
      text:'其他区域开动率',
      x:'center',
      bottom:'10%'
    },


    series:[
      {
        name:'开动率',
        type:'gauge',
        splitNumber:1,

        axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
                color:[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']],
                width: 10,
                shadowColor : '#fff', //默认透明
                shadowBlur: 20
            }
        },

        axisLabel:{
          show:false
        },

        axisTick:{
          show:false
        },

        splitLine:{
          show:false
        },

        pointer:{
          width:4,
          length:'100%'
        },


        detail:{formatter:'{value}%'},
        data:[
          {
            value:48,
            name:'开动率'
          }
        ]
      }
    ]
  };

  myChart.setOption(option);
</script>

</body>
</html>
